<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  
  
  <link rel="shortcut icon" href="img/favicon.ico">
  <title>JavaFX - Java Note</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:400,700|Inconsolata:400,700" />

  <link rel="stylesheet" href="css/theme.css" />
  <link rel="stylesheet" href="css/theme_extra.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css" />
  
  <script>
    // Current page data
    var mkdocs_page_name = "JavaFX";
    var mkdocs_page_input_path = "JavaFX.md";
    var mkdocs_page_url = null;
  </script>
  
  <script src="js/jquery-2.1.1.min.js" defer></script>
  <script src="js/modernizr-2.8.3.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script> 
  
</head>

<body class="wy-body-for-nav" role="document">

  <div class="wy-grid-for-nav">

    
    <nav data-toggle="wy-nav-shift" class="wy-nav-side stickynav">
    <div class="wy-side-scroll">
      <div class="wy-side-nav-search">
        <a href="." class="icon icon-home"> Java Note</a>
        <div role="search">
  <form id ="rtd-search-form" class="wy-form" action="./search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" title="Type search term here" />
  </form>
</div>
      </div>

      <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
                <ul>
                    <li class="toctree-l1"><a class="reference internal" href="index.html">Home</a>
                    </li>
                </ul>
                <ul>
                    <li class="toctree-l1"><a class="reference internal" href="StringX.html">StringX</a>
                    </li>
                </ul>
                <ul>
                    <li class="toctree-l1"><a class="reference internal" href="Collection.html">Collection</a>
                    </li>
                </ul>
                <ul>
                    <li class="toctree-l1"><a class="reference internal" href="IO.html">IOFile</a>
                    </li>
                </ul>
                <ul>
                    <li class="toctree-l1"><a class="reference internal" href="Lambda.html">Lambda</a>
                    </li>
                </ul>
                <ul>
                    <li class="toctree-l1"><a class="reference internal" href="Generic.html">Generic</a>
                    </li>
                </ul>
                <ul>
                    <li class="toctree-l1"><a class="reference internal" href="Stream.html">Stream</a>
                    </li>
                </ul>
                <ul>
                    <li class="toctree-l1"><a class="reference internal" href="Atomic.html">Atomic</a>
                    </li>
                </ul>
                <ul>
                    <li class="toctree-l1"><a class="reference internal" href="Reflect.html">Reflect</a>
                    </li>
                </ul>
                <ul class="current">
                    <li class="toctree-l1 current"><a class="reference internal current" href="JavaFX.html">JavaFX</a>
    <ul class="current">
    <li class="toctree-l2"><a class="reference internal" href="#element">Element</a>
        <ul>
    <li class="toctree-l3"><a class="reference internal" href="#_1">属性绑定</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#property">Property</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#common-properties-and-method-for-nodes">Common Properties and Method for Nodes</a>
        <ul>
    <li class="toctree-l4"><a class="reference internal" href="#style">style</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#rotate">rotate</a>
    </li>
        </ul>
    </li>
        </ul>
    </li>
    <li class="toctree-l2"><a class="reference internal" href="#component">Component</a>
        <ul>
    <li class="toctree-l3"><a class="reference internal" href="#color">Color</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#font">Font</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#image">Image</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#layout-panes-and-groups">Layout Panes and Groups</a>
        <ul>
    <li class="toctree-l4"><a class="reference internal" href="#flowpane">FlowPane</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#gridpane">GridPane</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#borderpane">BorderPane</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#hbox-and-vbox">HBox and VBox</a>
    </li>
        </ul>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#splitpane">SplitPane</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#tabpane">TabPane</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#shape">Shape</a>
        <ul>
    <li class="toctree-l4"><a class="reference internal" href="#text">Text</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#line">Line</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#rectangle">Rectangle</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#circle-and-ellipse">Circle and Ellipse</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#arc">Arc</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#polygon-and-polyline">Polygon and Polyline</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#quadcurve-and-cubiccurve">QuadCurve and CubicCurve</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#path">Path</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#stroke">Stroke</a>
    </li>
        </ul>
    </li>
        </ul>
    </li>
    <li class="toctree-l2"><a class="reference internal" href="#eventdriven">EventDriven</a>
        <ul>
    <li class="toctree-l3"><a class="reference internal" href="#event">Event</a>
        <ul>
    <li class="toctree-l4"><a class="reference internal" href="#mouseevent">MouseEvent</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#keyevent">KeyEvent</a>
    </li>
        </ul>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#listener">Listener</a>
    </li>
        </ul>
    </li>
    <li class="toctree-l2"><a class="reference internal" href="#animation">Animation</a>
        <ul>
    <li class="toctree-l3"><a class="reference internal" href="#transition">Transition</a>
        <ul>
    <li class="toctree-l4"><a class="reference internal" href="#pathtransition">PathTransition</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#fadetransition">FadeTransition</a>
    </li>
        </ul>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#timeline">Timeline</a>
        <ul>
    <li class="toctree-l4"><a class="reference internal" href="#keyframe">KeyFrame</a>
    </li>
        </ul>
    </li>
        </ul>
    </li>
    <li class="toctree-l2"><a class="reference internal" href="#ui-control">UI Control</a>
        <ul>
    <li class="toctree-l3"><a class="reference internal" href="#labeled-and-label">Labeled and Label</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#button">Button</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#checkbox">CheckBox</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#radiobutton">RadioButton</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#textfield">TextField</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#textarea">TextArea</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#combobox">ComboBox</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#listview">ListView</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#scrollbar">ScrollBar</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#slider">Slider</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#menus">Menus</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#content-menus">Content Menus</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#tableview">TableView</a>
    </li>
        </ul>
    </li>
    <li class="toctree-l2"><a class="reference internal" href="#multimedia">Multimedia</a>
        <ul>
    <li class="toctree-l3"><a class="reference internal" href="#video-and-audio">Video and Audio</a>
        <ul>
    <li class="toctree-l4"><a class="reference internal" href="#media">Media</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#mediaplayer">MediaPlayer</a>
    </li>
    <li class="toctree-l4"><a class="reference internal" href="#mediaview">MediaView</a>
    </li>
        </ul>
    </li>
        </ul>
    </li>
    <li class="toctree-l2"><a class="reference internal" href="#javafx-css">JavaFX CSS</a>
    </li>
    <li class="toctree-l2"><a class="reference internal" href="#coordinate-transformations">Coordinate Transformations</a>
        <ul>
    <li class="toctree-l3"><a class="reference internal" href="#translations">Translations</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#rotation">Rotation</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#scaling">Scaling</a>
    </li>
        </ul>
    </li>
    <li class="toctree-l2"><a class="reference internal" href="#fxml">FXML</a>
    </li>
    <li class="toctree-l2"><a class="reference internal" href="#suntry">Suntry</a>
        <ul>
    <li class="toctree-l3"><a class="reference internal" href="#keycombination">KeyCombination</a>
    </li>
    <li class="toctree-l3"><a class="reference internal" href="#delay">Delay</a>
    </li>
        </ul>
    </li>
    </ul>
                    </li>
                </ul>
                <ul>
                    <li class="toctree-l1"><a class="reference internal" href="Sundry.html">Sundry</a>
                    </li>
                </ul>
      </div>
    </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

      
      <nav class="wy-nav-top" role="navigation" aria-label="top navigation">
        <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
        <a href=".">Java Note</a>
      </nav>

      
      <div class="wy-nav-content">
        <div class="rst-content">
          <div role="navigation" aria-label="breadcrumbs navigation">
  <ul class="wy-breadcrumbs">
    <li><a href=".">Docs</a> &raquo;</li>
    
      
    
    <li>JavaFX</li>
    <li class="wy-breadcrumbs-aside">
      
    </li>
  </ul>
  
  <hr/>
</div>
          <div role="main">
            <div class="section">
              
                <p><img alt="relation" src="JavaFX/photo/image-20200910212505096.png" /></p>
<h2 id="javafx">JavaFX</h2>
<blockquote>
<p><code>JavaFX</code> 程序可以不用 <code>main</code> 方法</p>
<p><code>stage.setResizable(false)</code> 可设置 stage 大小不可被改变</p>
</blockquote>
<p><code>Stage</code> 坐标位置左上角 为 <strong>(0,0)</strong></p>
<blockquote>
<p>Java 图形的尺寸单位都是用像素</p>
<p>颜色的 null 表示无色</p>
</blockquote>
<h3 id="element">Element</h3>
<h4 id="_1">属性绑定</h4>
<blockquote>
<p>可以将一个目标对象和一个源对象绑定</p>
<p>目标对象跟随源对象改变</p>
</blockquote>
<table>
<thead>
<tr>
<th>对象</th>
<th>名称</th>
</tr>
</thead>
<tbody>
<tr>
<td>目标对象</td>
<td>绑定对象/属性</td>
</tr>
<tr>
<td>源对象</td>
<td>可绑定/观察对象</td>
</tr>
</tbody>
</table>
<p>将 圆 绑定到 pane 的一半位置</p>
<pre><code class="language-java">public static void start(Stage primaryStage){
    Circle circle=new Circle();
    Pane pane=new Pane();
    circle.centerXProperty().bind(pane.widthProperty().divide(2));
    circle.centerYProperty().bind(pane.heightProperty().divide(2));
    circle.setRadius(50);
    circle.setStroke(Color.GRAY);
    circle.setFill(Color.YELLOW);
    pane.getChildren().add(circle);
    Scene scene=new Scene(pane,400,400);
    primaryStage.setTitle(&quot;CenteredCircle&quot;);
    primaryStage.setScene(scene);
    primaryStage.show();
}
</code></pre>
<blockquote>
<p>可观察的源对象是 <code>javafx.beans.value.ObervableValue</code> 接口的实例</p>
</blockquote>
<p>属性获取方法带单词 <code>Property</code> </p>
<h4 id="property">Property</h4>
<pre><code class="language-java">public static void BindProperty(){
    DoubleProperty dp=new SimpleDoubleProperty(1);
    DoubleProperty dp2=new SimpleDoubleProperty(1);
    dp.bind(dp2.multiply(2));//also can we do like : dp2.add(3).divide(2) to make the linear relationship
    System.out.println(&quot;dp is &quot;+dp.getValue()
                       + &quot;and dp2 is &quot;+ dp2.getValue());
    dp2.set(70);
    System.out.println(&quot;dp is &quot;+dp.getValue()
                       + &quot;and dp2 is &quot;+ dp2.getValue());
}
</code></pre>
<h4 id="common-properties-and-method-for-nodes">Common Properties and Method for Nodes</h4>
<blockquote>
<p>The <code>Node</code> class defines many properties and methods that are common to all nodes</p>
</blockquote>
<h5 id="style">style</h5>
<blockquote>
<p><code>JavaFX</code> style property are similar to <strong>cascading style sheets</strong>(<code>CSS</code>) used to specify the styles for <strong>HTML</strong></p>
</blockquote>
<p>In JavaFX , a style property is defined with a prefix <code>-fx-</code> </p>
<p><a href="https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/
cssref.html">Reference</a></p>
<blockquote>
<p>syntax  <strong>styleName:value</strong></p>
</blockquote>
<p><code>circle.setStyle("-fx-strock:black;-fx-fill:red;");</code></p>
<h5 id="rotate">rotate</h5>
<p><code>pane.setRotate(45);</code>  45度</p>
<p>set rotate angle</p>
<h3 id="component">Component</h3>
<h4 id="color">Color</h4>
<p><img alt="Color" src="JavaFX/photo/image-20200911092839939.png" /></p>
<p><strong>RGBO</strong></p>
<p>opacity value is arrange 0 to 1</p>
<h4 id="font">Font</h4>
<p><code>javafx.scene.text.Font</code></p>
<blockquote>
<p>A <code>Font</code> describes font name, weight, and size</p>
</blockquote>
<p><img alt="Font" src="JavaFX/photo/image-20200911094238959.png" /></p>
<p>Or use a quick way to add all Nodes</p>
<p><code>pane.getChildren().addAll(circlle,label);</code></p>
<h4 id="image">Image</h4>
<blockquote>
<p>The <strong>Image</strong> class represent a graphical image, and the <strong>ImageView</strong> class can be used to display an image</p>
</blockquote>
<pre><code class="language-java">Image image = new Image(&quot;image/us.gif&quot;);
ImageView imageView=new ImageView(image);
//or alternatively You can directly create ImageView
// ImageView imageView=new ImageView(&quot;image/us.gif&quot;);
</code></pre>
<p><img alt="Image" src="JavaFX/photo/image-20200911115841825.png" /></p>
<h4 id="layout-panes-and-groups">Layout Panes and Groups</h4>
<blockquote>
<p>padding 为内边距(margin)</p>
</blockquote>
<p><img alt="Panes" src="JavaFX/photo/image-20200911132908633.png" /></p>
<blockquote>
<p><strong>Pane</strong> is usually used as a canvas for displaying shapes</p>
<p><strong>Pane</strong> is the base class for all specialized panes</p>
<p><strong>Group</strong> 可以装一堆Nodes 然后用于 scene 的构造</p>
</blockquote>
<h5 id="flowpane">FlowPane</h5>
<p>arranges the nodes in the pane horizontally from left to right, or vertically from top to bottom</p>
<p>specify the way the nodes are placed horizontally or vertically using one of the two constants:<strong>Orientation.HORIZONTAL</strong> or <strong>Orientation.VERTICAL</strong></p>
<p>also can specify the gap between the nodes in pixels</p>
<p><img alt="FlowPane" src="JavaFX/photo/image-20200911134435784.png" /></p>
<p><img alt="GapPosition" src="JavaFX/photo/image-20200911150138489.png" /></p>
<pre><code class="language-java">public static Scene ShowFlowPane(){
    FlowPane flowPane=new FlowPane();
    flowPane.setPadding(new Insets(11,12,13,14));
    flowPane.setHgap(5);
    flowPane.setVgap(5);
    flowPane.getChildren().addAll(new Label(&quot;First Name: &quot;),new TextField(),
                                  new Label(&quot;MI: &quot;));
    TextField textField=new TextField();
    textField.setPrefColumnCount(1);
    flowPane.getChildren().addAll(textField,new Label(&quot;Last Name: &quot;),new TextField());
    return new Scene(flowPane,200,250);
}
</code></pre>
<h5 id="gridpane">GridPane</h5>
<blockquote>
<p><strong>GridPane</strong> arranges nodes in a grid(matrix) formation</p>
<p>The nodes are placed in the specified column and row indices.</p>
</blockquote>
<p><img alt="GridPane" src="JavaFX/photo/image-20200911151043846.png" /></p>
<pre><code class="language-java">public static Scene ShowGridPane(){
    GridPane pane=new GridPane();
    pane.setAlignment(Pos.CENTER);
    pane.setPadding(new Insets(11.5,12.5,13.5,14.5));
    pane.setHgap(5.5);
    pane.setVgap(5.5);
    pane.add(new Label(&quot;First Name&quot;),0,0);
    pane.add(new TextField(),1,0);
    pane.add(new Label(&quot;MI: &quot;),0,1);
    pane.add(new TextField(),1,1);
    pane.add(new Label(&quot;Last Name: &quot;),0,2);
    pane.add(new TextField(),1,2);
    Button BtnAdd=new Button(&quot;Add Name&quot;);
    pane.add(BtnAdd,1,3);
    GridPane.setHalignment(BtnAdd, HPos.RIGHT);
    return new Scene(pane);
}
</code></pre>
<blockquote>
<p>Every Node should use the position to locate to push into the <strong>GridPane</strong></p>
</blockquote>
<h5 id="borderpane">BorderPane</h5>
<blockquote>
<p>place nodes in five regions: <strong>top</strong> <strong>bottom</strong> <strong>left</strong> <strong>right</strong> and <strong>center</strong></p>
<p>Each part can get a pane to storge more nodes</p>
</blockquote>
<pre><code class="language-java">public static Scene ShowBorderPane(){
    BorderPane pane=new BorderPane();

    pane.setTop(new CustomPane(&quot;Top&quot;));
    pane.setRight(new CustomPane(&quot;Right&quot;));
    pane.setLeft(new CustomPane(&quot;Left&quot;));
    pane.setBottom(new CustomPane(&quot;Bottom&quot;));
    pane.setCenter(new CustomPane(&quot;Center&quot;));

    return new Scene(pane,300,300);
}
</code></pre>
<pre><code class="language-java">class CustomPane extends StackPane{
    public CustomPane(String title){
        getChildren().add(new Label(title));
        setStyle(&quot;-fx-border-color: red&quot;);
        setPadding(new Insets(11.5,12.5,13.5,14.5));
    }
}
</code></pre>
<h5 id="hbox-and-vbox">HBox and VBox</h5>
<blockquote>
<p><strong>HBox</strong> for <strong>horizontal</strong> rows</p>
<p><strong>VBox</strong> for <strong>vertical</strong> columns</p>
</blockquote>
<p><img alt="HBox_and_VBox" src="JavaFX/photo/image-20200911154838364.png" /></p>
<h4 id="splitpane">SplitPane</h4>
<blockquote>
<p>The <strong>SplitPane</strong> class can be used to display multiple panes and allow the user to adjust the size of the panes</p>
</blockquote>
<h4 id="tabpane">TabPane</h4>
<blockquote>
<p>display multiple panes with tabs</p>
</blockquote>
<p><img alt="TabPane" src="JavaFX/image-20201122155942214.png" /></p>
<pre><code class="language-java">Scene TabPaneShow(){
        TabPane tabPane = new TabPane();
        Tab tab1 = new Tab(&quot;Line&quot;);
        StackPane pane1 = new StackPane();
        pane1.getChildren().add(new Line(10, 10, 80, 80));
        tab1.setContent(pane1);
        Tab tab2 = new Tab(&quot;Rectangle&quot;);
        tab2.setContent(new Rectangle(10, 10, 200, 200));
        Tab tab3 = new Tab(&quot;Circle&quot;);
        tab3.setContent(new Circle(50, 50, 20));
        Tab tab4 = new Tab(&quot;Ellipse&quot;);
        tab4.setContent(new Ellipse(10, 10, 100, 80));
        tabPane.getTabs().addAll(tab1, tab2, tab3, tab4);

        return  new Scene(tabPane, 300, 250);
    }
</code></pre>
<h4 id="shape">Shape</h4>
<blockquote>
<p>JavaFX provides many shape classes for drawing texts, lines, circles, rectangles, 
 ellipses, arcs, polygons, and polylines.</p>
<p><code>Shape</code> class is an abstract base class</p>
</blockquote>
<p><img alt="Shape" src="JavaFX/photo/image-20200911155526440.png" /></p>
<h5 id="text">Text</h5>
<p>Usually placed in a pane</p>
<blockquote>
<p>The pane's upper-left corner point is <strong>(0,0)</strong> and the bottom-right point is <strong>(pane.getWidth(),pane.getHeight())</strong></p>
</blockquote>
<p><img alt="Text" src="JavaFX/photo/image-20200911155925280.png" /></p>
<h5 id="line">Line</h5>
<blockquote>
<p>A line connects two points with four parameters <strong>startX</strong> <strong>startY</strong> <strong>endX</strong> <strong>endY</strong></p>
</blockquote>
<p><img alt="Line" src="JavaFX/photo/image-20200911160859332.png" /></p>
<p>使用绑定值更方便</p>
<h5 id="rectangle">Rectangle</h5>
<blockquote>
<p>A rectangle is defined by the parameters <strong>x</strong>, <strong>y</strong>, <strong>width</strong>, <strong>height</strong>, <strong>arcWidth</strong>, and <strong>arcHeight</strong>, </p>
</blockquote>
<p><img alt="Rectangle" src="JavaFX/photo/image-20200911163547474.png" /></p>
<p><img alt="Arc" src="JavaFX/photo/image-20200911170313533.png" /></p>
<p>设置边缘圆润</p>
<blockquote>
<p><code>setArcHeight()</code></p>
<p><code>setArcWidth()</code></p>
</blockquote>
<h5 id="circle-and-ellipse">Circle and Ellipse</h5>
<p><img alt="Ellipse" src="JavaFX/photo/image-20200911171145620.png" /></p>
<p><img alt="Ellipse" src="JavaFX/photo/image-20200911171223748.png" /></p>
<h5 id="arc">Arc</h5>
<blockquote>
<p>An <strong>arc</strong> is conceived as part of an ellipse, defined by the parameters <strong>centerX</strong>   <strong>centerY</strong>   <strong>radiusX</strong>   <strong>radiusY</strong>  <strong>startAngle</strong> <strong>length</strong> and arc type<strong>(<code>ArcType.OPEN</code>, <code>ArcType.CHORD</code> , <code>ArcType.ROUND</code>)</strong> </p>
</blockquote>
<p><img alt="Arc" src="JavaFX/photo/image-20200911175117193.png" /></p>
<h5 id="polygon-and-polyline">Polygon and Polyline</h5>
<p><img alt="Polygen" src="JavaFX/photo/image-20200913113756697.png" /></p>
<blockquote>
<p>Two double value will form a point</p>
</blockquote>
<h5 id="quadcurve-and-cubiccurve">QuadCurve and CubicCurve</h5>
<p>The <strong>control</strong> point is usually not on the curve instead of defining the trend of 
the curve</p>
<p><img alt="QuadCurve" src="JavaFX/image-20201122142732856.png" /></p>
<p><img alt="CubicCurve" src="JavaFX/image-20201122142755611.png" /></p>
<blockquote>
<p><code>QuadCurve</code> has only one control point while <code>CubicCurve</code> has two</p>
</blockquote>
<p><img alt="diff" src="JavaFX/image-20201122142921334.png" /></p>
<p><strong>Stroke</strong> 是边</p>
<p><strong>Fill</strong> 是内部</p>
<h5 id="path">Path</h5>
<blockquote>
<p>The <strong>PathElement</strong> is the root class for the path elements <strong>MoveTo</strong>, 
  <strong>HLineTo</strong>, <strong>VLineTo</strong>, <strong>LineTo</strong>, <strong>ArcTo</strong>, <strong>QuadCurveTo</strong>, <strong>CubicCurveTo</strong>, and <strong>ClosePath</strong></p>
</blockquote>
<h5 id="stroke">Stroke</h5>
<blockquote>
<p><strong>Stroke defines a shape’s border line style</strong></p>
</blockquote>
<p><img alt="StrokeSet" src="JavaFX/image-20201122152658739.png" /></p>
<pre><code class="language-java">Scene StrokeShow(){
    Rectangle rectangle1 = new Rectangle(20, 20, 70, 120);
    rectangle1.setFill(Color.WHITE);
    rectangle1.setStrokeWidth(15);
    rectangle1.setStroke(Color.ORANGE);

    Rectangle rectangle2 = new Rectangle(20, 20, 70, 120);
    rectangle2.setFill(Color.WHITE);
    rectangle2.setStrokeWidth(15);
    rectangle2.setStroke(Color.ORANGE);
    rectangle2.setTranslateX(100);
    rectangle2.setStrokeLineJoin(StrokeLineJoin.BEVEL);

    Rectangle rectangle3 = new Rectangle(20, 20, 70, 120);
    rectangle3.setFill(Color.WHITE);
    rectangle3.setStrokeWidth(15);
    rectangle3.setStroke(Color.ORANGE);
    rectangle3.setTranslateX(200);
    rectangle3.setStrokeLineJoin(StrokeLineJoin.ROUND);

    Line line1 = new Line(320, 20, 420, 20);
    line1.setStrokeLineCap(StrokeLineCap.BUTT);
    line1.setStrokeWidth(20);

    Line line2 = new Line(320, 70, 420, 70);
    line2.setStrokeLineCap(StrokeLineCap.ROUND);
    line2.setStrokeWidth(20);

    Line line3 = new Line(320, 120, 420, 120);
    line3.setStrokeLineCap(StrokeLineCap.SQUARE);
    line3.setStrokeWidth(20);

    Line line4 = new Line(460, 20, 560, 120);
    line4.getStrokeDashArray().addAll(10.0, 20.0, 30.0, 40.0);
    Pane pane = new Pane();
    pane.getChildren().addAll(rectangle1, rectangle2, rectangle3,
                    line1, line2, line3, line4);
    return new Scene(pane,610,180);
}
</code></pre>
<h3 id="eventdriven">EventDriven</h3>
<h4 id="event">Event</h4>
<p><img alt="EventObject" src="JavaFX/image-20201119223632839.png" /></p>
<blockquote>
<p>User Event</p>
</blockquote>
<p><img alt="ReferTable" src="JavaFX/image-20201119224215147.png" /></p>
<blockquote>
<p>The Registry Map</p>
</blockquote>
<p><img alt="Registry" src="JavaFX/image-20201119230206048.png" /></p>
<h5 id="mouseevent">MouseEvent</h5>
<blockquote>
<ol>
<li><code>PRIMARY</code><ol>
<li>左键</li>
</ol>
</li>
<li><code>SECOND</code><ol>
<li>右键</li>
</ol>
</li>
<li><code>MIDDLE</code><ol>
<li>中键</li>
</ol>
</li>
<li><code>NONE</code></li>
</ol>
</blockquote>
<p><code>getButton</code> 测试 按下键位</p>
<blockquote>
<p>相关的方法</p>
</blockquote>
<p><img alt="MouseEvent" src="JavaFX/image-20201120003549418.png" /></p>
<p>鼠标拖动示例代码</p>
<pre><code class="language-java">import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class MouseEventDemo extends Application {
  @Override // Override the start method in the Application class
  public void start(Stage primaryStage) {
    // Create a pane and set its properties
    Pane pane = new Pane();
    Text text = new Text(20, 20, &quot;JavaFX is fun&quot;);
    pane.getChildren().addAll(text);
    text.setOnMouseDragged(e –&gt; {
      text.setX(e.getX());
      text.setY(e.getY());
    });

    // Create a scene and place it in the stage
    Scene scene = new Scene(pane, 300, 100);
    primaryStage.setTitle(&quot;MouseEventDemo&quot;); // Set the stage title 
    primaryStage.setScene(scene); // Place the scene in the stage
    primaryStage.show(); // Display the stage
  }
}
</code></pre>
<h5 id="keyevent">KeyEvent</h5>
<p>一些方法</p>
<p><img alt="KeyEvent" src="JavaFX/image-20201120003643948.png" /></p>
<p>按键码</p>
<p><img alt="KeyCode" src="JavaFX/image-20201120003714927.png" /></p>
<blockquote>
<p><strong>TIPS</strong></p>
<ol>
<li><code>DIGIT1</code> <code>NUMPAD1</code><ol>
<li>小键盘数字键和68布局键盘那个数字键不同</li>
</ol>
</li>
<li><code>getCode</code><ol>
<li>返回 <code>enum KeyCode</code>  的常量</li>
<li><strong>不区分大小写</strong></li>
</ol>
</li>
<li><code>getText</code><ol>
<li>返回 <strong>描述键</strong> 的字符串</li>
</ol>
</li>
<li><code>getCharacter</code><ol>
<li>空字符串</li>
</ol>
</li>
</ol>
</blockquote>
<p>下面为示例</p>
<pre><code>getCode : OPEN_BRACKET
getCharacter :  
getText : [

getCode : CLOSE_BRACKET
getCharacter :  
getText : ]

getCode : J
getCharacter :  
getText : J

getCode : A
getCharacter :  
getText : a
</code></pre>
<blockquote>
<p><p style="font-size:8 color:gold">requestFocus</p> 用于 <code>Node</code> 接受键盘输入 </p>
<p>需要 在 <code>primaryStage.show();</code> 之后调用 才能获得键盘输入焦点</p>
</blockquote>
<h4 id="listener">Listener</h4>
<blockquote>
<p>A listener can process a value change in an observable object.</p>
</blockquote>
<p>simple example</p>
<pre><code class="language-java">import javafx.beans.InvalidationListener;
import javafx.beans.Observable;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;

public class ObservablePropertyDemo{
    public static void main(String[] args){
        DoubleProperty balance = new SimpleDoubleProperty();
        balance.addListener(new InvalidationListener() {
    public void invalidated(Observable ov) {
        System.out.println(&quot;The new value is &quot; + balance.doubleValue());//4.5
        }
    });
        //balance.addListener(ov -&gt; System.out.println(&quot;The new value is &quot; + balance.doubleValue()));
        balance.set(4.5);
    }
}
</code></pre>
<h3 id="animation">Animation</h3>
<blockquote>
<p>Basic Abstract Class <strong>Animation</strong></p>
</blockquote>
<p><img alt="AnimationUML" src="JavaFX/image-20201120100935114.png" /></p>
<table>
<thead>
<tr>
<th>Val</th>
<th>Meanings</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>autoReverse</code></td>
<td>指示下个周期是否反转方向</td>
</tr>
<tr>
<td><code>cycleCount</code></td>
<td>动画周期数</td>
</tr>
<tr>
<td><code>rate</code></td>
<td>动画速度</td>
</tr>
<tr>
<td><code>status</code></td>
<td><code>Status.PAUSE|RUNNING|STOPPED</code></td>
</tr>
</tbody>
</table>
<h4 id="transition">Transition</h4>
<blockquote>
<p>过渡 转变</p>
</blockquote>
<h5 id="pathtransition">PathTransition</h5>
<blockquote>
<p>animates the <strong>moves</strong> of a node along a path from one end to 
  the other over a given time</p>
</blockquote>
<p><img alt="PTUML" src="JavaFX/image-20201120101502950.png" /></p>
<blockquote>
<p><code>Path</code> the path for node to rotate or go through</p>
</blockquote>
<h5 id="fadetransition">FadeTransition</h5>
<blockquote>
<p>animates the change of the <strong>opacity</strong> in a node over a given time</p>
</blockquote>
<p><img alt="FadeTranUML" src="JavaFX/image-20201120103502850.png" /></p>
<h4 id="timeline">Timeline</h4>
<blockquote>
<p>program any animation using one or more <code>KeyFrame</code>s. Each <code>KeyFrame</code> is executed sequentially at a specified time interval</p>
<p>a KeyFrame can be constructed using this way</p>
<p><code>new KeyFrame(Duration duration, EventHandler&lt;ActionEvent&gt; onFinished)</code></p>
</blockquote>
<pre><code class="language-java">Scene TimeLine(){//timeline example
        StackPane pane = new StackPane();
        Text text = new Text(20, 50, &quot;Programming is fun&quot;);
        text.setFill(Color.RED);
        pane.getChildren().add(text); // Place text into the stack pane

        // Create a handler for changing text
        EventHandler&lt;ActionEvent&gt; eventHandler = e -&gt; {
            if (text.getText().length() != 0) {
                text.setText(&quot;&quot;);
            }
            else {
                text.setText(&quot;JavaFX is fun&quot;);
            }
        };

        // Create an animation for alternating text
        Timeline animation = new Timeline(
                new KeyFrame(Duration.millis(500), eventHandler));
        animation.setCycleCount(Timeline.INDEFINITE);
        animation.play(); // Start animation

        // Pause and resume animation
        text.setOnMouseClicked(e -&gt; {
            if (animation.getStatus() == Animation.Status.PAUSED) {
                animation.play();
            }
            else {
                animation.pause();
            }
        });
        return new Scene(pane,100,100);
    }
</code></pre>
<h6 id="keyframe">KeyFrame</h6>
<blockquote>
<p>关键帧</p>
<p>Defines target values at a specified point in time for a set of variables that are interpolated along a <a href="https://docs.oracle.com/javase/8/javafx/api/javafx/animation/Timeline.html"><code>Timeline</code></a>.</p>
</blockquote>
<p>多次添加后是重叠同步的</p>
<h3 id="ui-control">UI Control</h3>
<p><img alt="view" src="JavaFX/image-20201120111741974.png" /></p>
<h4 id="labeled-and-label">Labeled and Label</h4>
<blockquote>
<p>A label is a display area for a short text, a node, or both. It is often used to label other 
  controls (usually text fields)</p>
</blockquote>
<p><img alt="Labeled" src="JavaFX/image-20201120113726254.png" /></p>
<p>效果为带标签的<code>node</code>结点 用 <code>setContentDisplay</code> 设置<code>node</code>内容显示位置</p>
<h4 id="button">Button</h4>
<p><img alt="ButtonUML" src="JavaFX/image-20201120114451889.png" /></p>
<blockquote>
<p><code>getGraphic</code> 得到填充的 <code>Node</code></p>
</blockquote>
<h4 id="checkbox">CheckBox</h4>
<blockquote>
<p>used for the user to make a selection</p>
</blockquote>
<p><img alt="CheckBox" src="JavaFX/image-20201121123532939.png" /></p>
<p>可以设置图片</p>
<h4 id="radiobutton">RadioButton</h4>
<blockquote>
<p>AKA option buttons, enable you to choose a single item from 
  a group of choices</p>
</blockquote>
<p><img alt="RadioBUML" src="JavaFX/image-20201121150223318.png" /></p>
<h4 id="textfield">TextField</h4>
<blockquote>
<p>enter or display a string</p>
</blockquote>
<pre><code class="language-java">TextField tfMessage = new TextField(&quot;T-Storm&quot;);
tfMessage.setEditable(false);
tfMessage.setStyle(&quot;−fx−text−fill: red&quot;);
tfMessage.setFont(Font.font(&quot;Times&quot;, 20));
tfMessage.setAlignment(Pos.BASELINE_RIGHT);
</code></pre>
<p><img alt="TextField" src="JavaFX/image-20201121150741046.png" /></p>
<h4 id="textarea">TextArea</h4>
<blockquote>
<p>enables the user to enter multiple lines of text</p>
</blockquote>
<pre><code class="language-java"> TextArea taNote = new TextArea(&quot;This is a text area&quot;);
 taNote.setPrefColumnCount(20);
 taNote.setPrefRowCount(5);
 taNote.setWrapText(true);
 taNote.setStyle(&quot;-fx-text-fill: red&quot;);
 taNote.setFont(Font.font(&quot;Times&quot;, 20));
</code></pre>
<blockquote>
<p><strong>TextArea</strong> provides scrolling, but often it is useful to create a <strong>ScrollPane</strong> object to hold an 
  instance of <strong>TextArea</strong> and let <strong>ScrollPane</strong> handle scrolling for <strong>TextArea</strong>, as follows:</p>
<p><code>java
  // Create a scroll pane to hold text area
  ScrollPane scrollPane = new ScrollPane(taNote);</code></p>
<p><strong>You can place any node in a ScrollPane. ScrollPane automatically provides vertical 
  and  horizontal scrolling if the node is too large to fit in the viewing area</strong></p>
</blockquote>
<h4 id="combobox">ComboBox</h4>
<blockquote>
<p>AKA a choice list or drop-down list, contains a list of items 
  from which the user can choose</p>
</blockquote>
<p><img alt="ComboBox" src="JavaFX/image-20201121153449354.png" /></p>
<h4 id="listview">ListView</h4>
<p><img alt="ListView" src="JavaFX/image-20201121154352245.png" /></p>
<p>The <code>SelectionModel</code> is defined in one of the two constants <code>SelectionMode.MULTIPLE</code> and 
<code>SelectionMode.SINGLE</code></p>
<p>P687</p>
<h4 id="scrollbar">ScrollBar</h4>
<blockquote>
<p>enables the user to select from a range of values</p>
</blockquote>
<p><img alt="SBG" src="JavaFX/image-20201121155516693.png" /></p>
<p><img alt="ScrollBar" src="JavaFX/image-20201121155757173.png" /></p>
<h4 id="slider">Slider</h4>
<blockquote>
<p><strong>Slider</strong> is similar to <strong>ScrollBar</strong>, but <strong>Slider</strong> has more properties and can appear in 
  many forms</p>
</blockquote>
<p><img alt="SliderUML" src="JavaFX/image-20201121160006546.png" /></p>
<h4 id="menus">Menus</h4>
<p><strong>MenuBar</strong>  <strong>Menu</strong>  <strong>MenuItem</strong>  <strong>CheckMenuItem</strong> and <strong>RadioButtonMenuItem</strong></p>
<p>MenuBar is a top-level menu component used to hold the menus</p>
<p>A menu item can be an instance of MenuItem, CheckMenuItem, or RadioButtonMenuItem</p>
<p>The sequence of implementing menus in JavaFX</p>
<ol>
<li>
<p>Create a menu bar and add to a pane</p>
<p><code>java
MenuBar menuBar = new MenuBar();
Pane pane = new Pane();
pane.getChildren().add(menuBar);</code></p>
</li>
<li>
<p>Create menus and add them under the menu bar</p>
<p><code>java
Menu menuFile = new Menu("File");
Menu menuHelp = new Menu("Help");
menuBar.getMenus().addAll(menuFile, menuHelp);</code></p>
</li>
<li>
<p>Creating menu items and add them to the menus</p>
<ol>
<li>
<p>Creating submenu items.</p>
<p><code>java
Menu softwareHelpSubMenu = new Menu("Software");
Menu hardwareHelpSubMenu = new Menu("Hardware");
menuHelp.getItems().add(softwareHelpSubMenu);
menuHelp.getItems().add(hardwareHelpSubMenu);
softwareHelpSubMenu.getItems().add(new MenuItem("Unix"));
softwareHelpSubMenu.getItems().add(new MenuItem("Windows"));
softwareHelpSubMenu.getItems().add(new MenuItem("Mac OS"));</code></p>
</li>
<li>
<p>Creating check-box menu items</p>
<p><code>java
menuHelp.getItems().add(new CheckMenuItem("Check it"));</code></p>
</li>
</ol>
</li>
<li>
<p>The menu items generate <code>ActionEvent</code>. To handle <code>ActionEvent</code>, implement the 
    <code>setOnAction</code> method</p>
</li>
<li>
<p>Image Icons and Keyboard Accelerators </p>
<p><code>java
Menu menuFile = new Menu("File",
  new ImageView("image/usIcon.gif"));
MenuItem menuItemOpen = new MenuItem("New",
  new ImageView("image/new.gif"));
CheckMenuItem checkMenuItem = new CheckMenuItem("Check it",
  new ImageView("image/us.gif"));
RadioMenuItem rmiBlue = new RadioMenuItem("Blue",
  new ImageView("image/us.gif"));</code></p>
</li>
</ol>
<h4 id="content-menus">Content Menus</h4>
<blockquote>
<p>A context menu, AKA a popup menu</p>
</blockquote>
<ol>
<li>
<p>create an instance of ContextMenu</p>
</li>
<li>
<p>add <strong>MenuItem</strong> <strong>CheckMenuItem</strong> and <strong>RadioMenuItem</strong> to the context menu</p>
<p><code>java
ContextMenu contextMenu = new ContextMenu();
ContextMenu.getItems().add(new MenuItem("New"));
ContextMenu.getItems().add(new MenuItem("Open"));</code></p>
</li>
</ol>
<p>specify the parent node and the location of the context menu</p>
<pre><code class="language-java">// Using the coordinate system of the parent like this
contextMenu.show(node, x, y);
</code></pre>
<p>Here are the major steps in the program
1.  Create a context menu using ContextMenu. Create menu items for New, Open, Print, 
and Exit using MenuItem.
2.  Add the menu items into the context menu.
3.  Create a pane and place it in the scene.
4.  Implement the handler to process the events from the menu items.
5.  Implement the <strong>mousePressed</strong> handler to display the context menu.</p>
<pre><code class="language-java">Pane pane = new Pane();
pane.setOnMousePressed(
    e -&gt; contextMenu.show(pane, e.getScreenX(), e.getScreenY()));
</code></pre>
<p><strong>Content Menu</strong> 和 <strong>Pane</strong> 是独立可交互的两部分</p>
<h4 id="tableview">TableView</h4>
<blockquote>
<p>display tables using the <strong>TableView</strong> class</p>
</blockquote>
<p><strong>TableView</strong>, <strong>TableColumn</strong>, and <strong>TableCell</strong> are used to display and manipulate a table. </p>
<ol>
<li><strong>TableView</strong> displays a table</li>
<li><strong>TableColumn</strong> defines the columns in a table</li>
<li><strong>TableCell</strong> represents a cell in the table</li>
</ol>
<p><strong>process</strong></p>
<ol>
<li>Create an instance of <strong>TableView</strong> and associate data with the <strong>TableView</strong></li>
<li>Create columns using the <strong>TableColumn</strong> class and set a column cell value factory to specify how to populate all cells within a single <strong>TableColumn</strong></li>
</ol>
<pre><code class="language-java">// Create nested columns
TableColumn locationColumn = new TableColumn(&quot;Location&quot;);
locationColumn.getColumns().addAll(new TableColumn(&quot;latitude&quot;),
  new TableColumn(&quot;longitude&quot;));
</code></pre>
<h3 id="multimedia">Multimedia</h3>
<h4 id="video-and-audio">Video and Audio</h4>
<h5 id="media"><code>Media</code></h5>
<p><img alt="Media" src="JavaFX/image-20201121161314288.png" /></p>
<h5 id="mediaplayer"><code>MediaPlayer</code></h5>
<blockquote>
<p>The <code>MediaPlayer</code> class plays and controls the media with properties such as <strong>autoPlay</strong>, 
  <strong>currentCount</strong>,  <strong>cycleCount</strong>,  <strong>mute</strong>,  <strong>volume</strong>,  and  <strong>totalDuration</strong>,  as  shown  in 
   Figure 16.31. You can construct a MediaPlayer object from a media and use the <strong>pause()</strong> 
  and <strong>play()</strong> methods to pause and resume playing.</p>
</blockquote>
<p><img alt="MediaPlayer" src="JavaFX/image-20201121161442574.png" /></p>
<h5 id="mediaview"><code>MediaView</code></h5>
<blockquote>
<p>The <strong>MediaView</strong> class is a subclass of Node that provides a view of the <strong>Media</strong> being played 
  by a <strong>MediaPlayer</strong>. The <strong>MediaView</strong> class provides the properties for viewing the media,</p>
</blockquote>
<p><img alt="MediaView" src="JavaFX/image-20201121161616659.png" /></p>
<h3 id="javafx-css">JavaFX CSS</h3>
<blockquote>
<p>based on <strong>CSS</strong> with some extensions</p>
</blockquote>
<p>With <strong>prefix</strong> <code>-fx-</code></p>
<p>Each node in JavaFX has a <code>styleClass</code> variable of the <code>List&lt;String&gt;</code> type</p>
<p>The  <code>Scene</code>  and  <code>Parent</code> classes  have  the  stylesheets  property</p>
<p>结点/控件 设置 <code>selector</code> 使用 <code>getStyleClass</code> <code>setId</code></p>
<p><code>Scene</code> 载入 <strong>CSS</strong> 文件 <code>getStylesheets</code> </p>
<pre><code class="language-java">scene.getStylesheets().add(&quot;mystyle.css&quot;); // Load the stylesheet 
pane1.getStyleClass().add(&quot;border&quot;);
circle4.getStyleClass().addAll(&quot;circleborder&quot;, &quot;plainCircle&quot;);// Add style classes
circle4.setId(&quot;greencircle&quot;); // Add a style class 
</code></pre>
<pre><code class="language-css">.back{
    -fx-background-image: url(&quot;file:_relative/_path/_file.ext&quot;);
}
</code></pre>
<h3 id="coordinate-transformations">Coordinate Transformations</h3>
<h4 id="translations">Translations</h4>
<ol>
<li><code>setTranslateX(double  x)</code></li>
<li><code>setTranslateY(double  y)</code></li>
<li><code>setTranslateZ(double  z)</code></li>
</ol>
<p><code>setTranslateX(5)</code> moves the node 5 pixels to the right and <code>setTranslateY(−10)</code>10 pixels up from the previous position</p>
<p><img alt="sampleTranslate" src="JavaFX/image-20201122151542851.png" /></p>
<h4 id="rotation">Rotation</h4>
<blockquote>
<p><code>rotate(double theta)</code> rotate by <strong>theta</strong> degrees <strong>clockwise</strong> (顺时针)</p>
</blockquote>
<h4 id="scaling">Scaling</h4>
<ol>
<li><code>setScaleX(double sx)</code></li>
<li><code>setScaleY(double sy)</code></li>
</ol>
<p>specify a scaling factor</p>
<h3 id="fxml">FXML</h3>
<blockquote>
<p><strong>XML</strong>-based script language for describing the user interface</p>
</blockquote>
<h3 id="suntry">Suntry</h3>
<h4 id="keycombination">KeyCombination</h4>
<blockquote>
<p><code>KeyCombination</code></p>
</blockquote>
<pre><code class="language-java">KeyCombination keyCombo=new KeyCodeCombination(KeyCode.S,KeyCodeCombination.SHORTCUT_DOWN);// C-S
        Scene scene=new Scene(split);
        scene.getAccelerators().put(keyCombo, new Runnable() {
            @Override
            public void run() {
                // todo
            }
        });
</code></pre>
<h4 id="delay">Delay</h4>
<blockquote>
<p>Using the <strong>animation</strong> to make it</p>
<p><code>Timeline</code> and the play&amp;duration will make it nice</p>
</blockquote>
<pre><code class="language-java">public static void TitleTick(Alert alert){
        Timeline streamline=new Timeline(new KeyFrame(Duration.millis(1000),e-&gt;{
            if(alert.getSecToClose()&lt;0){
                alert.setTitle(&quot;Long Time Stage&quot;);
            }
            else if(alert.getAndDecrementRemainTime()==0){
                alert.close();
            }else{
                alert.setTitle(String.valueOf(alert.getSecToClose()));
            }
        }));
        streamline.setCycleCount(alert.getSecToClose());
        streamline.play();
    }
// Alert extends Stage
</code></pre>
              
            </div>
          </div>
          <footer>
  
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
      
        <a href="Sundry.html" class="btn btn-neutral float-right" title="Sundry">Next <span class="icon icon-circle-arrow-right"></span></a>
      
      
        <a href="Reflect.html" class="btn btn-neutral" title="Reflect"><span class="icon icon-circle-arrow-left"></span> Previous</a>
      
    </div>
  

  <hr/>

  <div role="contentinfo">
    <!-- Copyright etc -->
    
  </div>

  Built with <a href="https://www.mkdocs.org/">MkDocs</a> using a <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
      
        </div>
      </div>

    </section>

  </div>

  <div class="rst-versions" role="note" aria-label="versions">
    <span class="rst-current-version" data-toggle="rst-current-version">
      
      
        <span><a href="Reflect.html" style="color: #fcfcfc;">&laquo; Previous</a></span>
      
      
        <span style="margin-left: 15px"><a href="Sundry.html" style="color: #fcfcfc">Next &raquo;</a></span>
      
    </span>
</div>
    <script>var base_url = '.';</script>
    <script src="js/theme.js" defer></script>
      <script src="search/main.js" defer></script>
    <script defer>
        window.onload = function () {
            SphinxRtdTheme.Navigation.enable(true);
        };
    </script>

</body>
</html>
